<template>
  <a-modal v-model:visible="addDetailVisable" :title="title" title-align="start" ok-text="保存" @cancel="handleCancel" @before-ok="handleSubmit" modal-class="formModal" :mask-closable="false">
    <a-form :model="detailForm" ref="detailFormRef" style="max-height: 500px;" :disabled="disabled" >
      <a-form-item field="components" label="部件名称" :rules="[{required:true,message:'请选择部件/分系统'}]">
        <a-select v-model="detailForm.components" placeholder="请选择部件/分系统" @change="selectInfluenceIndex">
          <a-option v-for="(item) in systemList" :key="item.id" :value="item.id">{{ item.nodeName }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="categories" label="指标类别" :rules="[{required:true,message:'请选择指标类别'}]">
        <a-select v-model="detailForm.categories" placeholder="请选择指标类别" @change="selectInfluenceIndex">
          <a-option v-for="item in categoriesEnum" :key="item.value" :value="item.value">{{ item.label }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="metricsName" label="指标名称" :rules="[{required:true,message:'请选择指标名称'}]">
        <a-select v-model="detailForm.metricsName" placeholder="请选择指标名称">
          <a-option v-for="item in nodeNameList" :key="item.id" :value="item.metricsName">{{ item.metricsName }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="+detailForm.categories === 2" field="score" label="结果" :rules="[{required:true,message:'请输入分值'}]">
        <a-input v-model="detailForm.score" placeholder="请输入分值" />
      </a-form-item>
      <a-form-item v-else field="result" label="结果" :rules="[{required:true,message:'请选择结果'}]">
        <a-select v-model="detailForm.result" placeholder="请选择结果">
          <a-option v-for="item in resultEnum" :key="item.value" :value="item.value">{{ item.label }}</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, defineProps, defineExpose, toRefs } from 'vue'
import { apiFault } from '@/api/fault'
import { Message } from '@arco-design/web-vue'
const props = defineProps({
  systemList: {
    type: Array,
    default: () => []
  },
  getList: {
    type: Function,
    required: true
  }
})
const addDetailVisable = ref(false)
const { systemList } = toRefs(props)
const faultId = ref(0)
const tabVal = ref(0)
const typeVal = ref(0)
const title = ref('新建影响')
const nodeNameList = ref([])
const detailFormRef = ref(null)
let detailForm = ref({
  components: '',
  categories: '',
  result: '',
  score: '',
  metricsName: ''
})
const categoriesEnum = [{
  label: '功能项',
  value: 1
}, {
  label: '性能项',
  value: 2
}]
const resultEnum = [{
  label: '失效',
  value: 0
}, {
  label: '正常',
  value: 1
}]
const updateList = (id) => {
  props.getList(id)
}
const selectInfluenceIndex = () => {
  let data = {
    categories: detailForm.value?.categories,
    components: detailForm.value?.components
  }
  detailForm.value.metricsName = ''
  detailForm.value?.categories && detailForm.value?.components && apiFault.selectInfluenceIndex(data).then(res => {
    if(+res.code === 200) {
      nodeNameList.value = res.data
    } else {
      Message.error(res.message)
    }
  })
}
const disabled = ref(false)
const openAddDetail = ( data, type ,id, tab) => {
  detailForm.value = {
    components: '',
    categories: '',
    result: '',
    score: '',
    metricsName: ''
  }
  data && apiFault.selectOneInfluenceIndexDetail(data).then(res => {
    if(+res.code === 200) {
      detailForm.value = {
        ...res.data
      }
    } else {
      Message.error(res.message)
    }
  })
  typeVal.value = type
  faultId.value = id
  tabVal.value = tab
  title.value = type ===1 ? '新建影响': '编辑影响'
  addDetailVisable.value = true
}
const handleCancel = () => {
  addDetailVisable.value = false
}
const submitEnum = reactive({
  1: apiFault.saveInfluence,
  2: apiFault.editInfluence
}) 
const handleSubmit = (done) => {
  detailFormRef.value.validate((errors) => {
    !errors && submitEnum[typeVal.value]({...detailForm.value, faultId: faultId.value, type: tabVal.value}).then(res => {
      if(+res.code ===200) {
        Message.success(+typeVal.value === 1 ? '新增成功' : '编辑成功')
        updateList(faultId.value);
        handleCancel();
      } else {
        Message.error(res.message)
      }
      done(false)
    }).catch(() => done(false))
  })
  done(false)
}
defineExpose({
  openAddDetail
})
</script>

<style lang="less" scoped>

</style>